<template>
    <div class="header_center">
        <!-- 版心 -->
        <div class="left_center container">
            <!-- 左侧 -->
            <el-aside class="center">
                <!-- 左侧头部 -->
                <el-card class="left">
                    <div class="base_info">
                        <img class="left_img" src="./img/03.png" alt="" />
                        <span style="margin-left: 4px">张晓飞NPsI</span>
                        <span class="level_box">
                            <i class="lv1">lv.1</i>
                        </span>
                    </div>
                    <div class="account_left">
                        <div class="account_number">
                            <p class="account_count">0</p>
                            <p class="tip">关注</p>
                        </div>
                        <div class="account_numbers">
                            <p class="account_count">0</p>
                            <p class="tip">粉丝</p>
                        </div>
                    </div>
                </el-card>
                <!-- 左侧中部 -->
                <el-card class="member_text">
                    <div class="vue-back-to-top" @click="gotoDynamics">
                        <span>资源动态</span>
                    </div>
                </el-card>
                <!-- 左侧下部 -->
                <el-card class="navigation-block">
                    <div class="member_text" @click="gotoMember">
                        <span>我的会员</span>
                    </div>
                    <div class="member_text" @click="gotoWallet">
                        <span>我的钱包</span>
                    </div>
                    <div class="member_text" @click="gotoCoupons">
                        <span>我的优惠券</span>
                    </div>
                    <div class="member_text" @click="gotoOrder">
                        <span>我买的订单</span>
                    </div>

                    <el-row class="tac">
                        <el-col>
                            <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                                <el-sub-menu>
                                    <template #title>
                                        <span>我卖的</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item>
                                            <router-link style="text-decoration: none; color: #111;"
                                                to="/Center/Seller/Orders_manager"> 订单管理</router-link>
                                        </el-menu-item>
                                        <el-menu-item>
                                            <router-link style="text-decoration: none; color: #111;"
                                                to="/Center/Seller/Goods_manager">商品管理</router-link>
                                        </el-menu-item>
                                        <el-menu-item>
                                            <router-link style="text-decoration: none; color: #111;"
                                                to="/Center/Seller/customers_manager">客户管理</router-link>
                                        </el-menu-item>
                                        <el-menu-item>
                                            <router-link style="text-decoration: none; color: #111;"
                                                to="/Center/Seller/Pending_payments_manager">代收款</router-link>
                                        </el-menu-item>
                                        <el-menu-item>
                                            <router-link style="text-decoration: none; color: #111;"
                                                to="/Center/Seller/MinePreferentialManagement">优惠管理</router-link>
                                        </el-menu-item>
                                        <el-menu-item>
                                            <router-link style="text-decoration: none; color: #111;"
                                                to="/Center/Seller/MineReviewsManagement">评价管理</router-link>
                                        </el-menu-item>
                                        <el-menu-item>
                                            <router-link style="text-decoration: none; color: #111;"
                                                to="/Center/Dynamics">保证金</router-link>
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </el-sub-menu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card>
                    <div class="member_text">
                        <router-link to="/Center/Edit_info" style="text-decoration: none; color: black">我的资料
                        </router-link>
                    </div>
                </el-card>
            </el-aside>

            <!-- 右侧 -->
            <el-container>
                <el-header class="Header">
                    <el-card shadow="never">
                        <div class="Header_title">
                            <el-menu class="el-menu-demo" mode="horizontal">
                                <el-menu-item 
                                    v-for="tit in $route.meta.title"
                                    :key="tit" 
                                    style="margin-right:10px"
                                >
                                    {{ tit }}
                                </el-menu-item>
                            </el-menu>
                        </div>
                    </el-card>
                </el-header>

                <el-main class="Main" style="margin-top:50px">
                    <el-card class="Main_card">
                        <router-view></router-view>
                    </el-card>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
    name: "Center",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
// import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

const router = useRouter();
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};

//跳转到资源动态
const gotoDynamics = () => {
    router.push({
        name: "Deposit",
    });
};
//跳转到我的会员
const gotoMember = () => {
    router.push({
        name: "My_member",
    });
};
//跳转到我的钱包
const gotoWallet = () => {
    router.push({
        name: "Wallet",
    });
};
//跳转到我的优惠券
const gotoCoupons = () => {
    router.push({
        name: "Coupons",
    });
};
//跳转到我买的订单
const gotoOrder = () => {
    router.push({
        name: "My_order",
    });
};

</script>

<style scoped lang="less">
.header_center {
    .left_center {
        width: 1200px;
        display: block;
        line-height: 19px;
        margin-top: 20px;


        //左侧
        .center {
            float: left;
            width: 170px;
            text-align: center;

            .left {
                background-color: #fff;
                margin-bottom: 10px;

                .base_info {
                    font-size: 14px;
                    color: #111;
                    text-align: center;
                    display: inline-block;
                    position: relative;
                    max-width: 130px;
                    line-height: 22px;
                    cursor: pointer;

                    .left_img {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                    }

                    .level_box {
                        display: block;
                        background: linear-gradient(#ff289b, #ff43d0);
                        border: 1px solid #fff;
                        border-radius: 4px;
                        width: 20px;
                        margin-left: 55px;
                        line-height: 1;
                    }
                }

                .account_left {
                    position: relative;
                    box-sizing: border-box;
                    margin-top: 18px;

                    .account_number {
                        position: absolute;
                        width: 50%;
                    }

                    .account_numbers {
                        margin-left: 50%;
                    }
                }
            }

            .member_text {
                margin-bottom: 10px;

                .vue-back-to-top {
                    font-size: 16px;
                    color: #111;
                    cursor: pointer;
                    display: block;
                    text-decoration: none;
                }
            }

            .navigation-block {
                margin-top: 10px;
                border-radius: 4px;
                margin-bottom: 10px;

                .member_text {
                    font-size: 14px;
                    color: #111;
                    padding: 17px 21px;
                    cursor: pointer;
                    position: relative;
                    display: block;
                    text-decoration: none;

                    span {
                        margin-right: 2px;
                    }
                }
            }

            .navigation-item-content {
                height: 35px;
                font-size: 16px;
                color: #111;
                padding-top: 10px;
                margin-top: 10px;
                cursor: pointer;
                position: relative;
                display: block;
                text-decoration: none;
                background-color: rgb(231, 243, 253);
            }
        }

        //右侧
        .mine_dynamic {
            width: 1020px;
            margin-left: 170px;

            //右侧头部
            .Header {
                // padding: 0;
                height: 50px;
                --el-header-height: 0px !important;

                .Header_title {
                    height: 100%;
                    width: 116px;
                    text-align: center;
                    .el-menu-demo{
                        border-bottom: none;
                    }
                    
                }
            }

            .Main {
                padding: 0;
                margin-top: 52px;
                background-color: pink;

            }
        }
    }
}
.el-menu--horizontal{
    border-bottom: none;
}
.el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: #409EFF;
    color: var(--el-menu-active-color) !important;
}
</style>
